<template>
  <a-card :bordered="false">
    <a-form :form="form">
      <a-form-item :label="$t('platformManagement.app.enable')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-switch :disabled="!canEdit" v-decorator="['status', { valuePropName: 'checked' }]" />
      </a-form-item>
      <a-form-item :label="$t('platformManagement.app.customConfig')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-switch
          :disabled="!canEdit"
          @change="handleAvailableChange"
          v-decorator="['available', { valuePropName: 'checked' }]"
        />
      </a-form-item>
      <a-form-item label="AgentID" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input-number
          :disabled="!canEdit"
          style="width: 100%;"
          v-decorator="[
            'agentId',
            {
              rules: [{ required: isUsed, message: 'AgentID不能为空' }]
            }
          ]"
          :precision="0"
          :min="0"
          :max="999999999"
        ></a-input-number>
      </a-form-item>
      <a-form-item label="CorpID" :label-col="labelCol" :wrapper-col="wrapperCol">
        <s-input
          :disabled="!canEdit"
          :limit="256"
          v-decorator="[
            'corpId',
            {
              rules: [{ required: isUsed, message: 'CorpID不能为空', whitespace: isUsed }]
            }
          ]"
        ></s-input>
      </a-form-item>
      <a-form-item label="SecretID" :label-col="labelCol" :wrapper-col="wrapperCol">
        <s-input
          :disabled="!canEdit"
          :limit="256"
          v-decorator="[
            'secretId',
            {
              rules: [{ required: isUsed, message: 'SecretID不能为空', whitespace: isUsed }]
            }
          ]"
        ></s-input>
      </a-form-item>
      <a-form-item
        :label="$t('platformManagement.app.accountAssoicate')"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-radio-group
          v-decorator="[
            'wechatLinkedType',
            {
              rules: [
                {
                  required: isUsed,
                  message: $t('common.emptyErr', { name: $t('platformManagement.app.accountAssoicate') }),
                  whitespace: isUsed
                }
              ]
            }
          ]"
        >
          <a-radio value="JOB_NUMBER" class="radio-style">{{
            $t('platformManagement.app.useAssoicate', { name: $t('authenticationCenter.org.jobNumber') })
          }}</a-radio>
          <a-radio value="MOBILE" class="radio-style">{{
            $t('platformManagement.app.useAssoicate', { name: $t('authenticationCenter.org.mobile') })
          }}</a-radio>
          <a-radio value="EMAIL" class="radio-style">{{
            $t('platformManagement.app.useAssoicate', { name: $t('authenticationCenter.org.email') })
          }}</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item v-action:edit :colon="false" label=" " :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-button @click="handleReset">{{ $t('common.cancel') }}</a-button>
        <a-button style="margin-left: 20px" @click="handleSubmit" type="primary">{{ $t('common.submit') }}</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import { getWxConfig, updateWxConfig } from '@/api/company'
import { SInput } from '@/components'
export default {
  name: 'CompanyWxConfig',
  created () {
    this.init()
  },
  components: {
    SInput
  },
  data () {
    return {
      appId: this.$route.query.id,
      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 10 }, sm: { span: 17 } },
      form: this.$form.createForm(this),
      isUsed: false, // 是否启用  启用的时候要做非空判断
      data: null,
      canEdit: this.$auth('edit', this.$route.meta.permissionId)
    }
  },
  methods: {
    init () {
      getWxConfig({ appId: this.appId }).then(res => {
        this.data = res.data || {}
        this.$nextTick(() => {
          const { status, available, agentId, corpId, secretId, wechatLinkedType } = this.data
          this.form.setFieldsValue({
            status: !!status,
            available: !!available,
            agentId,
            corpId,
            secretId,
            wechatLinkedType
          })
          this.isUsed = !!available
        })
      })
    },
    handleAvailableChange (checked) {
      this.isUsed = checked
    },
    handleSubmit () {
      this.form.validateFields((err, value) => {
        console.log(err, value)
        if (err) {
          return
        }
        const { id } = this.data
        const { status, available, agentId, corpId, appId, secretId, wechatLinkedType } = value

        updateWxConfig({
          id,
          appId: this.appId,
          status: status ? 1 : 0,
          available: available ? 1 : 0,
          agentId,
          corpId: corpId ? corpId.trim() : '',
          appId: this.appId,
          secretId: secretId ? secretId.trim() : '',
          wechatLinkedType
        }).then(res => {
          this.$message.success(res.message)
        })
      })
    },
    handleReset () {
      this.init()
    }
  }
}
</script>

<style scoped>
.radio-style {
  display: block;
  height: 30px;
  line-height: 30px;
}
</style>
